#index {
    color: #d3d6dd;
    background-color: #000000;
    width: 100%;
    height: 100vh;
    .bg {
        padding: 0.2rem 0.2rem 0 0.2rem;
        background-image: url("../assets/pageBg.png");
        background-size: cover;
        background-position: center center;
    }
    .host-body {
        .body_title {
            .title {
                position: relative;
                width: 10.9rem;
                line-height: .625rem;
                text-align: center;
                background-size: cover;
                background-repeat: no-repeat;
                .dv-decoration-6 {
                    svg {
                        margin-top: .166667rem;
                    }
                }
                .title-text {
                    font-size: .533333rem;
                    font-weight: 600;
                    position: absolute;
                    width: 100%;
                    bottom: -0.133333rem;
                    left: 50%;
                    transform: translate(-50%);
                }
                .title-bototm {
                    position: absolute;
                    bottom: -0.133333rem;
                    left: 50%;
                    transform: translate(-50%);
                }
            }
        }
        // 时间
        .text {
            position: absolute;
            right: .166667rem;
            top: .3rem;
            font-size: .25rem;
            color: #0D8891;
            text-align: right;
        }
        .body-box {
            margin-top: .3rem;
            display: grid;
            grid-template-columns: 6fr 4fr;
            height: 12.333333rem; // 740px
            .body_left {
                display: grid;
                grid-template-rows: 3fr 2fr 2fr;
                // grid-template-columns: 3fr 2fr 2fr;
                // height: 12.333333rem; // 740px
                .lefttop {
                    // height: 3.7rem; // 296px
                    display: grid;
                    // background: yellow;
                    height: 100%;
                    grid-template-columns: 1fr 1fr;
                    .lefttop1 {
                        height: 100%;
                        width: 5.2855rem; //422.84px
                        // height: 3.7rem; //296px
                        // background-color: #CC2222;
                    }
                    .lefttop2 {
                        height: 100%;
                        // height: 3.7rem; //296px
                        // background-color: orange;
                    }
                }
                .leftmiddle {
                    // background: pink;
                    display: grid;
                    height: 100%;
                    grid-template-columns: 1fr 1fr;
                    .leftmiddle1 {
                        // height: 2.775rem;
                        height: 100%;
                        // background-color: green;
                    }
                    .leftmiddle2 {
                        // background-color: #0D8891;
                        height: 100%;
                        // height: 2.775rem;
                    }
                }
                .leftbotton {
                    display: grid;
                    height: 100%;
                    grid-template-columns: 1fr 1fr;
                    .leftbotton1 {
                        // background-color: orange;
                        height: 100%;
                    }
                    .leftbotton2 {
                        // background-color: #CC2222;
                        height: 100%;
                    }
                }
            }
        }
        .body_right {
            display: grid;
            grid-template-rows: 1fr 1fr;
            // height: 12.333333rem; // 740px
            // background-color: #0B0F2A;
            .right_top {
                // background-color: #CC2222;
                height: 100%;
            }
            .right_botton {
                // background-color: orange;
                height: 100%;
            }
        }
    }
}